import React, { Component } from 'react'

import { Carousel, Flex, Modal, Toast } from 'antd-mobile'

import NavHeader from '../../components/NavHeader'
import HouseItem from '../../components/HouseItem'
import HousePackage from '../../components/HousePackage'

import { API, BASE_URL, isAuth } from '../../utils'

import styles from './index.module.scss'

// 猜你喜欢
const recommendHouses = [
  {
    id: 1,
    houseImg: '/img/message/1.png',
    desc: '72.32㎡/南 北/低楼层',
    title: '安贞西里 3室1厅',
    price: 4500,
    tags: ['随时看房']
  },
  {
    id: 2,
    houseImg: '/img/message/2.png',
    desc: '83㎡/南/高楼层',
    title: '天居园 2室1厅',
    price: 7200,
    tags: ['近地铁']
  },
  {
    id: 3,
    houseImg: '/img/message/3.png',
    desc: '52㎡/西南/低楼层',
    title: '角门甲4号院 1室1厅',
    price: 4300,
    tags: ['集中供暖']
  }
]

// 百度地图
const BMap = window.BMap

const labelStyle = {
  position: 'absolute',
  zIndex: -7982820,
  backgroundColor: 'rgb(238, 93, 91)',
  color: 'rgb(255, 255, 255)',
  height: 25,
  padding: '5px 10px',
  lineHeight: '14px',
  borderRadius: 3,
  boxShadow: 'rgb(204, 204, 204) 2px 2px 2px',
  whiteSpace: 'nowrap',
  fontSize: 12,
  userSelect: 'none'
}

export default class HouseDetail extends Component {
  state = {
    isLoading: false,

    houseInfo: {
      // 房屋图片
      slides: [],
      // 标题
      title: '',
      // 标签
      tags: [],
      // 租金
      price: 0,
      // 房型
      roomType: '两室一厅',
      // 房屋面积
      size: 89,
      // 装修类型
      renovation: '精装',
      // 朝向
      oriented: [],
      // 楼层
      floor: '',
      // 小区名称
      community: '',
      // 地理位置
      coord: {
        latitude: '39.928033',
        longitude: '116.529466'
      },
      // 房屋配套
      supporting: [],
      // 房屋标识
      houseCode: '',
      // 房屋描述
      description: ''
    },
    isFavorite: false
  }

  componentDidMount() {
    // console.log('路由参数',this.props);
    const id = this.props.match.params.id
    this.getHouseInfo(id)
  }
  async getHouseInfo(id) {
    const {data: {body}} = await API.get(`${BASE_URL}/houses/${id}`)
    // console.log('body', body);
    this.setState({houseInfo: {
      slides: body.houseImg,
      title: body.title,
      tags: body.tags,
      price: body.price,
      roomType: body.roomType,
      size: body.size,
      renovation: '精装',
      oriented: body.oriented,
      floor: body.floor,
      community: body.community,
      coord: body.coord,
      supporting: body.supporting,
      houseCode: body.houseCode,
      description: body.description
    }})
    this.renderMap(this.state.houseInfo.community, {
      latitude: this.state.houseInfo.coord.latitude,
      longitude: this.state.houseInfo.coord.longitude
    })
    this.checkFavorite(body.houseCode)
  }

  // 渲染轮播图结构
  renderSwipers() {
    const {
      houseInfo: { slides }
    } = this.state

    return slides.map((item, index) => (
      <a
        key={index}
        href="http://itcast.cn"
        style={{
          display: 'inline-block',
          width: '100%',
          height: '252px'
        }}
      >
        <img
          src={BASE_URL + item}
          alt=""
          style={{ width: '100%', verticalAlign: 'top', height: '252px' }}
        />
      </a>
    ))
  }

  // 渲染地图
  renderMap(community, coord) {
    // console.log('community', community);
    
    const { latitude, longitude } = coord

    const map = new BMap.Map('map')
    const point = new BMap.Point(longitude, latitude)
    map.centerAndZoom(point, 17)

    const label = new BMap.Label('', {
      position: point,
      offset: new BMap.Size(0, -36)
    })

    label.setStyle(labelStyle)
    label.setContent(`
      <span>${community}</span>
      <div class="${styles.mapArrow}"></div>
    `)
    map.addOverlay(label)
  }
  // 切换房源收藏
  handleFavorite = async () => {
    // console.log(this.state.houseInfo.houseCode);
    const {houseInfo: {houseCode}} = this.state
    // 是否登录， 登录了去收藏/取消收藏，没登录先去登录
    if(!isAuth()) {
      Modal.alert('提示', '登录后才能收藏房源，是否去登录', [
        {text: '取消'},
        {text: '去登录', onPress: () => {
          this.props.history.push('/login')
        }}
      ])
      return
    }
    if(this.state.isFavorite) {
      const {data: {status}} = await API.delete(`/user/favorites/${houseCode}`)
      this.showModal(status, false)
    } else {
      const {data: {status}} = await API.post(`/user/favorites/${houseCode}`)
      this.showModal(status, true)
    }
  }
  // 检查房源是否收藏
  async checkFavorite(houseCode) {
    // 先检查是否登录
    // 没有登录不做处理
    // 已登录已收藏则收藏高亮
    if(!isAuth) return
    const {data: {body, status}} = await API.get('/user/favorites/' + houseCode)
    // 处理token超时
    if (status === 400) return
    this.setState({isFavorite: body.isFavorite})
  }
  showModal = (status, isFavorite) => {
    if (status === 200) {
      // 删除成功
      Toast.info(isFavorite ? '已收藏' : '已取消收藏', 1.5)
      this.setState({ isFavorite })
    } else if (status === 400) {
      // token超时
      Modal.alert('提示', '登录后才能收藏房源，是否去登录', [
        { text: '取消' },
        {
          text: '去登录', onPress: () => {
            this.props.history.push('/login')
          }
        }
      ])
    }
  }
  render() {
    const { isLoading, houseInfo: {
      title,
      tags,
      price,
      roomType,
      size,
      renovation,
      oriented,
      floor,
      community,
      supporting,
      description,
    } } = this.state
    return (
      <div className={styles.root}>
        {/* 顶部导航栏 */}
        <NavHeader
          className={styles.navHeader}
          rightContent={<i className="iconfont icon-share" />}
        >
          {title}
        </NavHeader>

        {/* 轮播图 */}
        <div className={styles.slides}>
          {!isLoading ? (
            <Carousel autoplay infinite autoplayInterval={5000}>
              {this.renderSwipers()}
            </Carousel>
          ) : (
            ''
          )}
        </div>

        {/* 房屋基础信息 */}
        <div className={styles.info}>
          <h3 className={styles.infoTitle}>
            {title}
          </h3>
          <Flex className={styles.tags}>
            {
              tags.map((item, index) => (
                <Flex.Item key={index}>
                  <span className={[styles.tag, styles.tag1].join(' ')}>
                    {item}
                  </span>
                </Flex.Item>
              ))
            }
            {/* <Flex.Item>
              <span className={[styles.tag, styles.tag1].join(' ')}>
                aaa
              </span>
            </Flex.Item> */}
          </Flex>

          <Flex className={styles.infoPrice}>
            <Flex.Item className={styles.infoPriceItem}>
              <div>
                {price}
                <span className={styles.month}>/月</span>
              </div>
              <div>租金</div>
            </Flex.Item>
            <Flex.Item className={styles.infoPriceItem}>
              <div>{roomType}</div>
              <div>房型</div>
            </Flex.Item>
            <Flex.Item className={styles.infoPriceItem}>
              <div>{size}</div>
              <div>面积</div>
            </Flex.Item>
          </Flex>

          <Flex className={styles.infoBasic} align="start">
            <Flex.Item>
              <div>
                <span className={styles.title}>装修：</span>
                {renovation}
              </div>
              <div>
                <span className={styles.title}>楼层：</span>
                {floor}
              </div>
            </Flex.Item>
            <Flex.Item>
              <div>
                <span className={styles.title}>朝向：</span>{oriented[0]}
              </div>
              <div>
                <span className={styles.title}>类型：</span>普通住宅
              </div>
            </Flex.Item>
          </Flex>
        </div>

        {/* 地图位置 */}
        <div className={styles.map}>
          <div className={styles.mapTitle}>
            小区：
            <span>{community}</span>
          </div>
          <div className={styles.mapContainer} id="map">
            地图
          </div>
        </div>

        {/* 房屋配套 */}
        <div className={styles.about}>
          <div className={styles.houseTitle}>房屋配套</div>
          <HousePackage
            list={supporting}
          />
          {/* <div className="title-empty">暂无数据</div> */}
        </div>

        {/* 房屋概况 */}
        <div className={styles.set}>
          <div className={styles.houseTitle}>房源概况</div>
          <div>
            <div className={styles.contact}>
              <div className={styles.user}>
                <img src={BASE_URL + '/img/avatar.png'} alt="头像" />
                <div className={styles.useInfo}>
                  <div>王女士</div>
                  <div className={styles.userAuth}>
                    <i className="iconfont icon-auth" />
                    已认证房主
                  </div>
                </div>
              </div>
              <span className={styles.userMsg}>发消息</span>
            </div>

            <div className={styles.descText}>
              {/* {description || '暂无房屋描述'} */}
              {/* 1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
              2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
              3.人车分流，环境优美。
              4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。 */}
              {description}
            </div>
          </div>
        </div>

        {/* 推荐 */}
        <div className={styles.recommend}>
          <div className={styles.houseTitle}>猜你喜欢</div>
          <div className={styles.items}>
            {recommendHouses.map(item => (
              <HouseItem {...item} key={item.id} onClick={a => a} />
            ))}
          </div>
        </div>

        {/* 底部收藏按钮 */}
        <Flex className={styles.fixedBottom}>
          <Flex.Item onClick={this.handleFavorite}>
            <img
              src={this.state.isFavorite ? (BASE_URL + '/img/star.png') : (BASE_URL + '/img/unstar.png')}
              className={styles.favoriteImg}
              alt="收藏"
            />
          <span className={styles.favorite}>{this.state.isFavorite ? '已收藏' : '收藏'}</span>
          </Flex.Item>
          <Flex.Item>在线咨询</Flex.Item>
          <Flex.Item>
            <a href="tel:400-618-4000" className={styles.telephone}>
              电话预约
            </a>
          </Flex.Item>
        </Flex>
      </div>
    )
  }
}
